<template>
  <view class="login-page">
    <view class="img-bg">
      <u-image
        width="100%"
        height="100%"
        src="@/static/images/login_bg.png"
        bgColor="#09072e"
      />
    </view>

    <u-form
      class="form-box"
      :error-type="['toast']"
      :model="form.formData"
      ref="formRef"
    >
      <u-form-item :border-bottom="false" prop="loginName">
        <DmsInput
          icon="account-fill"
          placeholder="账号"
          v-model="form.formData.loginName"
          iconColor="#2D2F5A"
          placeholderStyle="rgba(255, 255, 255, 0.5)"
        />
      </u-form-item>
      <u-form-item :border-bottom="false" prop="password">
        <DmsInput
          icon="lock-fill"
          placeholder="密码"
          v-model="form.formData.password"
          type="password"
          iconColor="#2D2F5A"
          placeholderStyle="rgba(255, 255, 255, 0.5)"
          :password-icon="form.formData.password.length > 0"
        />
      </u-form-item>
      <u-form-item :border-bottom="false">
        <u-button type="primary" @click="submitFn" :disabled="form.isDisabled"
          >登录</u-button
        >
      </u-form-item>
    </u-form>
  </view>
  <u-modal
    class="dms-modal"
    v-model="modelShow"
    :show-title="false"
    :content="modelContent"
    confirm-text="知道了"
  />
</template>

<script setup>
import { reactive, ref } from 'vue';
import { onReady } from '@dcloudio/uni-app';
import { PWD_REG } from '@/configs';

const modelShow = ref(false);
const modelContent = ref('');

const formRef = ref(null);
const form = reactive({
  isDisabled: false,
  formData: {
    loginName: '11',
    password: '11',
    checked: false,
  },
  formRules: {
    loginName: [{ required: true, message: '请输入账号' }],
    password: [
      {
        required: true,
        message: '请输入密码',
        validator: (rule, value) => {
          if (!value) {
            rule.message = '请输入密码';
            return false;
          }
          if (!PWD_REG.test(value)) {
            rule.message = '密码格式不正确';
            return false;
          }
          return true;
        },
      },
    ],
    checked: [
      {
        required: true,
        type: 'boolean',
        message: '请勾选同意隐私政策和用户协议',
        validator: (rule, value) => {
          return value;
        },
      },
    ],
  },
});

onReady(() => {
  formRef.value.setRules(form.formRules);
});

async function submitFn() {
  formRef.value.validate(async (valid) => {
    if (valid) {
      form.isDisabled = true;
      try {
        throw { respDesc: '失败' };
        uni.redirectTo({
          url: '/pages/index/index',
        });
        form.isDisabled = false;
      } catch (err) {
        form.isDisabled = false;
        modelContent.value = err.respDesc || '登录失败';
        modelShow.value = true;
      }
    }
  });
}
</script>

<style lang="scss" scoped>
@import '@dms/themes/src/mixins/utils';

.login-page {
  width: 100vw;
  height: 100vh;
  background: $u-main-color;
  @include utils-clearfix();
  .img-bg {
    width: 256px;
    height: 202px;
    margin: 110px auto 32px;
  }
  .form-box {
    width: 325px;
    margin: 0 auto;
    display: block;
  }
}
</style>
